<script setup lang="ts">
  import { ref,inject } from 'vue'
  import { picturePreview } from '@/utils/tools'
  import { onLoad,onPullDownRefresh,onReachBottom } from '@dcloudio/uni-app'
  import { trainingCampInfo } from '@/api/training'
  import { chartAndTxt, overTeamList, getPublicImgList } from '@/api'
  const  $Prefix = inject('$Prefix')
  // 轮播列表
  const bannerList = ref([])
  const historyList = ref([])
  const uWaterfallRef = ref()
  let PreviewList = []
  const pageNo = ref(1)
  const loadStatus = ref('loadmore')
  const categoryId = ref()
  const tranFilter = ref([])

  // 轮播当前index
  const currentNum = ref<Number>(0)

  onLoad(() => {
    // #ifdef MP-WEIXIN
    uni.showShareMenu({
      withShareTicket: true,
      menus:["shareAppMessage","shareTimeline"]
    })
    // #endif
    trainingCampInfo().then(res => {
      if(res.code == 200){
        bannerList.value = res.data.banner ? JSON.parse(res.data.banner) : []
      }
    })
    getPublicImgList().then(res => {
      const data = JSON.parse(JSON.stringify(res.data))
      data.map((item:any,index:number) => {
        if(index == 0){
          item.active = true
          categoryId.value = item.id
        }else{
          item.active = false
        }
        return item
      })
      tranFilter.value = data
      getChartAndText()
    })
  })


  onPullDownRefresh(() => {
    pageNo.value = 1
    PreviewList = []
    historyList.value = []
    if (uWaterfallRef.value) {
      uWaterfallRef.value.clear()
    }
    getChartAndText()
  })
  onReachBottom(() => {
    getChartAndText()
  })
  const getChartAndText = () => {
    loadStatus.value = 'loading'
    chartAndTxt({pageNo:pageNo.value,pageSize:10,categoryId:categoryId.value}).then(res => {
      const previousList = JSON.parse(JSON.stringify(res.data.data))

      previousList.map((item:any,index:number) => {
        item.fileAddress = JSON.parse(item.fileAddress)
        PreviewList.push(item.fileAddress[0].fullUrl)
        item.index = index
        return item
      })
      pageNo.value++
      historyList.value = historyList.value.concat(previousList)
      if(historyList.value.length >= res.data.totalCount){
        loadStatus.value = 'nomore'
      }else {
        loadStatus.value = 'loadmore'
      }
      uni.stopPullDownRefresh();
    })
  }
  const bannerChange = (e:{current:number}) => {
    currentNum.value = e.current
  }
  const goSignUp = () => {
    uni.switchTab({url:'/pages/train/train'})
  }

  const filterClick = (data:any) => {
    tranFilter.value.map((item:any) => {
      item.active = false
      return item
    })
    data.active = true
    categoryId.value = data.id
    pageNo.value = 1
    PreviewList = []
    historyList.value = []
    if (uWaterfallRef.value){
      uWaterfallRef.value.clear()
    }
    getChartAndText()
  }

  const navigatorSkip = (url:string) => {
    uni.navigateTo({url})
  }
</script>

<template>
  <xx-title :placeholder="false"/>
  <view class="banner">
    <u-swiper
      :list="bannerList"
      indicatorStyle="right"
      :indicator="true"
      radius="0"
      keyName="fullUrl"
      height="100%"
      interval="5000"
      imgMode="widthfix"
      @change="bannerChange">
      <template #indicator>
        <view class="indicator">
          <text class="indicator-num__text">{{ currentNum + 1 }}/{{ bannerList.length }}</text>
        </view>
      </template>
    </u-swiper>
  </view>
  <view class="introduce-btn">
    <view class="introduce-left" @click="goSignUp" :style="{backgroundImage:`url(${$Prefix}/public/images/smallImage/project-btn.png)`}">
    </view>
    <view class="introduce-right" @click="navigatorSkip('/pages/introduce/manual')" :style="{backgroundImage:`url(${$Prefix}/public/images/smallImage/takeCare.png)`}">
    </view>
  </view>
  <view class="previous-period">
    <view class="previous-title">
      训练营风采
    </view>
    <scroll-view class="train-list" :scroll-x="true">
      <view class="train-list-item" @click="filterClick(item)" :class="{active:item.active}" v-for="item in tranFilter" :key="item.id">
        {{item.name}}
      </view>
    </scroll-view>
    <view class="waterfallFlow" v-show="historyList.length > 0">
      <up-waterfall ref="uWaterfallRef" v-model="historyList">
        <template v-slot:left="{leftList}">
          <view v-for="(item, index) in leftList" :key="index" class="warter-item">
            <up-lazy-load
              @click="picturePreview(item.index, PreviewList)"
              border-radius="10"
              :image="item.fileAddress[0].full_thumb_url"
              :index="index"
              :loadingImg="`${$Prefix}/public/images/smallImage/image-loading.png`"
              :errorImg="`${$Prefix}/public/images/smallImage/image_error.png`"></up-lazy-load>
          </view>
        </template>
        <template v-slot:right="{rightList}">
          <view v-for="(item, index) in rightList" :key="index" class="warter-item">
            <up-lazy-load
              @click="picturePreview(item.index, PreviewList)"
              border-radius="10"
              :image="item.fileAddress[0].full_thumb_url"
              :index="index"
              :loadingImg="`${$Prefix}/public/images/smallImage/image-loading.png`"
              :errorImg="`${$Prefix}/public/images/smallImage/image_error.png`"></up-lazy-load>
          </view>
        </template>
      </up-waterfall>
      <up-loadmore :status="loadStatus"></up-loadmore>
    </view>
    <up-empty width="80px" v-if="historyList.length == 0" height="100px" text="暂无训练营风采" textColor="#515462" :icon="`${$Prefix}/public/images/smallImage/emty.png`"/>
  </view>
</template>

<style lang="scss" scoped>
  ::v-deep .uni-mask{
    background-color: transparent !important;
  }
  .banner{
    height: 580rpx;
    ::v-deep .u-swiper__indicator{
      right: 10px;
      bottom: 10px;
    }
    ::v-deep .u-swiper__wrapper__item__wrapper{
      height: 100%;
    }
    .indicator{
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(10px);
      border-radius: 29px;
      padding: 6rpx 14rpx;
      font-size: 24rpx;
      color: #FFFFFF;
      font-weight: 500;
      line-height: normal;
    }
    .back-icon{
      position: fixed;
      width: 48rpx;
      height: 48rpx;
      z-index: 10;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .introduce-btn{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 28rpx;
    .introduce-left{
      height: 250rpx;
      margin-right: 16rpx;
      width: calc(50% - 16rpx);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
    }
    .introduce-right{
      height: 250rpx;
      width: calc(50% - 16rpx);
      margin-left: 16rpx;
      border-radius: 16rpx;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
    }
  }
  .previous-period{
    margin-top: 24rpx;
    padding: 20rpx 32rpx;
    .previous-title{
      position: relative;
      font-size: 32rpx;
      color: #21252E;
      padding-left: 16rpx;
      &:before{
        content: '';
        display: block;
        position: absolute;
        height: 32rpx;
        top: calc(50% - 16rpx);
        width: 8rpx;
        left: 0;
        border-radius: 8px 2px 8px 8px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 100%), #92C75B;
      }
    }
    .previous-body{
      margin-top: 24rpx;
      height: 416rpx;
    }
  }
  .warter-item{
    margin: 10rpx;
  }

  .train-list{
    margin: 20rpx 0;
    white-space: nowrap;
    .train-list-item{
      padding: 6rpx 24rpx;
      background: #F6F6F6;
      margin-right: 10rpx;
      border-radius: 100rpx;
      font-weight: 500;
      color:#505363;
      display: inline-block;
      font-size: 28rpx;
      margin-bottom: 10rpx;
      &:last-child{
        margin-right: 0;
      }
      &.active{
        color: #7B9462;
        border:1rpx solid #7B9462;
        background: #EDF4E6;
      }
    }
  }
</style>
